<template>
	<view class="content">
		<view class="mine_top ">	
			<view class="mine_top1 " >
				<image src="/static/index.png" mode="" class="img" @click="index()"></image>
				<text>团油</text>
			</view>
			<view class="flex">
			  <view class="mine_top_t" @click="message()">
				<image :src="mine_src1" mode="widthFix" ></image>
			  </view>
			  <view class="mine_top_right" v-for="(item,index) in mine_top_right" :key="index">
				<view class="flex top_phone">
					<view>{{item.phone}}</view>
					<view class="top_right_r flex">
						<view class="mine_check flex">
						  <image :src="item.src" mode=""></image>
						  <view class="mine_q" @click="qian()">签到领奖&gt;</view>
					   </view>
					   <view class="" @click="service()">
					   	<image :src="item.src1" mode="" ></image>
					   </view>
					</view>		
				</view>
				<view class="mine_top_r_b">
					<view class="mine_zhu">注册会员</view>
					<view class="mine_wei">未认证物流车/商用车</view>
				</view>
			  </view>
			</view>
		</view>
		<view class="mine_content">
			<view class="mine_hui">
			  <view class="hui_content">
				<view class="mine_hui_top flex">
				   <view class="hui_left flex">
					  <view class="hui_left_one flex">
						<image src="/static/images/jiayou1.gif" mode="" ><span>省钱会员</span></image>
					  </view>
					<view class="hui_left_two">每月领48元专属红包</view>	
				   </view>
				  <view class="hui_left_three" @click="member()">立即开通&gt;</view>
				</view>
				<view class="hui_b flex"  >
					<view class="flex"v-for="(item,index) in hui" :key="index">
						<image :src="item.src" alt="" class="img"><text>{{item.title}}</text></image>
					</view>
				</view>
			  </view>
			</view>
			<view class="mine_deng">
				<view class="deng_top flex"v-for="item in deng" :key="index">
					<view class="deng_top_c flex" >
						<image :src="item.src" mode="" class="img"></image><text>{{item.text}}</text>
					</view>
					<view class="deng_top_cha" @click="rights()">
						{{item.text1}}&gt;
					</view>
				</view>
				<span></span>
			</view><!--等级-->
			<view class="mine_assets">
				<view class="assets_title">
					我的资产
				</view>
				<view class=" assets_shu flex">
					<dl v-for="(item,index) in assets" :key="index" @click="goNews(item.id)">
						<dd>{{item.jia_money}}</dd><dt>{{item.text}}</dt>
					</dl>
				</view>
				<view class="asstes_list">
					<ul class="assets_lists flex1">
						<li v-for="(item,index) in assets_list" :key="index" class="flex" @click="got(item.id)">
							<view class="assets_lists_left">
								<view class="lists_left_top">{{item.title}}</view>
								<view class="lists_left_top1">{{item.title1}}</view>
							</view>
							<view class="lists_right">
								<image :src="item.src" mode="" class="img1"></image>
							</view>
						</li>
					</ul>
				</view>
			</view><!--我的资产-->
			<view class="guang">
				<image :src="mine_src2" mode=""></image>
			</view>
			<view class="mine_assets">
				<view class="assets_title">
					常用工具
				</view>
				<view class="flex1 mine_tools">
					<dl class="tools " v-for="(item,index) in tools" :key="index" @click="get(item.id)">
					<dd><image :src="item.src" mode="" class="img1"></image> </dd><dt>{{item.title}}</dt>
				</dl>
				</view>
				<view class="flex3 mine_tools">
					<dl class="tools " v-for="(item,index) in toolss" :key="index" @click="get(item.id)">
					<dd><image :src="item.src" mode="" class="img1"></image> </dd><dt>{{item.title}}</dt>
				</dl>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mine_src1: '/static/images/mine (14).gif',
				deng:[{src:'/static/images/mine (1).png',text:'v1成长等级0/200',text1:'查看权益'}],
				mine_src2:'/static/images/mine (5).gif',
				mine_top_right: [{
					phone: '185*****828',
					src: '/static/images/mine (15).gif',
					src1:'/static/images/mine (16).gif'
				}],
				hui:[
					{src:'/static/images/mine (17).gif',title:'超值红包',id:'1'},
					{src:'/static/images/mine (2).png',title:'会员抽奖',id:'2'},
					{src:'/static/images/mine (3).png',title:'专属客服',id:'3'},
					{src:'/static/images/mine (4).png',title:'敬请期待',id:'4'},
					],
				assets:[
					{jia_money:'0.00',text:'加油金（元）',id:'1'},
					{jia_money:'0',text:'优惠券（张）',id:'2'},
					{jia_money:'0',text:'红包（个）',id:'3'},
					{jia_money:'0',text:'油滴（个）',id:'4'},
				],
				// assets_list:[
				// 	{title:'每日签到',title1:'每日签到领加油金',src:'/static/images/我的_05 (5).gif',id:'1'},
				// 	{title:'加油金商城',title1:'玩转加油金得好礼',src:'/static/images/我的_05 (6).gif',id:'2'},
				// 	{title:'加油金夺宝',title1:'超值好礼限量夺',src:'/static/images/我的_05 (7).gif',id:'3'},
				// 	{title:'省钱专区',title1:'加油每升最高直降1元',src:'/static/images/我的_05 (8).gif',id:'4'}
				// ],
				assets_list:[
					{title:'每日签到',title1:'每日签到领加油金',src:'/static/images/mine (1).gif',id:'1'},
					
					{title:'省钱专区',title1:'加油每升最高直降1元',src:'/static/images/mine (4).gif',id:'2'}
				],
				tools:[
					{src:'/static/images/mine (6).gif',title:'油价预测',id:'1'},
					{src:'/static/images/mine (7).gif',title:'车主权益',id:'2'},
					{src:'/static/images/mine (8).gif',title:'我的礼品',id:'3'},
					{src:'/static/images/mine (9).gif',title:'我的收藏',id:'4'},
					{src:'/static/images/mine (10).gif',title:'我要合作',id:'5'},
					
				],
				toolss:[
					{src:'/static/images/mine (11).gif',title:'客服中心',id:'6'},
					{src:'/static/images/mine (12).gif',title:'公司证照',id:'7'},
					{src:'/static/images/mine (13).gif',title:'设置',id:'8'}
				]
			}
		},
		onLoad() {
			this.$api.baseName().then(res =>{
				console.log(res.data)
				this.datas = res.data.data
			}).catch(err =>{
				console.log(err)
			})
		},
		methods: {
			//跳转首页
			index:function(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			//跳转个人信息
			message:function(){
				uni.navigateTo({
					url:'./mine_message'
				})
			},
			//跳转开通会员
			member:function(){
				uni.navigateTo({
					url:'./member'
				})
			},
			//跳转查看权益
			rights:function(){
				uni.navigateTo({
					url:'./rights'
				})
			},
			//跳转签到领奖
			qian: function() {
				uni.navigateTo({
					url: './mine-check',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			//跳转在线客服
			service:function(){
				uni.navigateTo({
					url:'./service'
				})
			},
			//跳转签到与省钱
			got:function(id){
				if(id==1){
					uni.navigateTo({
						url: '/pages/mine/mine-check',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else{
					uni.switchTab({
						url:'/pages/save/save'
					})
				}
			},
			//我的资产四个页面
			goNews:function(id){
				if ( id ==1){
					uni.navigateTo({
						url:'./jyj'
					})
				} else if (id == 2){
					uni.navigateTo({
						url:'./yhj'
					})
				} else if ( id == 3){
					uni.navigateTo({
						url:'./hb'
					})
				} else{
					uni.navigateTo({
						url:'./yd'
					})
				}
			},
			//下面八个页面
			get:function(id){
				if ( id ==1){
					uni.navigateTo({
						url:'./yj'
					})
				} else if (id == 2){
					uni.navigateTo({
						url:'./cz'
					})
				} else if ( id == 3){
					uni.navigateTo({
						url:'./present'
					})
				} else if ( id == 4){
					uni.navigateTo({
						url:'./collect'
					})
				}else if ( id == 5){
					uni.navigateTo({
						url:'./cooperate'
					})
				}else if ( id == 6){
					uni.navigateTo({
						url:'./center'
					})
				}else if ( id == 7){
					uni.navigateTo({
						url:'./licence'
					})
				}
				else{
					uni.navigateTo({
						url:'./set'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	ul{list-style: none;}
	$fs2:25rpx;
	$border-radius:20rpx;
	$bac:#fff;
	.img{width: 40rpx;height: 40rpx;display: block;}
	.img1{width: 50rpx;height: 50rpx;display: block;}
	.mine_top1{display: flex;flex-direction: row;justify-content:flex-start;align-items: center;margin: 20rpx 0rpx;}
	.mine_top1 text{display: inline-block;margin-left: 25rpx;}
	.mine_content{margin: 0 auto;background-color: #f5f5f5;padding:0rpx 32rpx;overflow: auto;}
	.flex {display: flex;flex-direction: row;justify-content: space-between;align-items: center;}
	// 头部
	.mine_top {background-color: #e8ebf4;overflow: auto;padding: 0rem 28rpx  30rpx;}
	
	.mine_top_t image {width: 80rpx;height: 80rpx;display: block;border-radius: 80rpx}
	.mine_top_right {width: 80%}
	.mine_top_right image{width:50rpx;height: 50rpx;display: block;}
	.top_phone {height: 40rpx;line-height: 40rpx;}
	.top_right_r{width:55%}
	.mine_check {width: 200rpx;background-image: linear-gradient(to right, #fff0f5, #fdfdf5);border-radius: 40rpx;}
	.mine_q {font-size: 25rpx}
	.mine_top_r_b {text-align: center;display: flex;flex-direction: row;box-sizing: border-box;height: 40rpx;line-height: 40rpx;margin-top: 20rpx;font-size:$fs2}
	.mine_top_r_b .mine_zhu{width:160rpx;border: 1px solid #000;border-radius: 40rpx;
	color: #000;font-weight: 600;}
	.mine_top_r_b .mine_wei{width:300rpx;border-radius: 40rpx;border: 1px solid #8b8c8e;color: #8b8c8e;margin-left: 20rpx;}
	// 会员
	.mine_hui{margin: 0 auto;box-sizing: border-box;border-radius:40rpx;background-image: linear-gradient(to right, #ffeacb ,#fbd1a1);height: 150rpx;padding:20rpx}
	.hui_content{border: 1px solid #8b8c8e;box-sizing: border-box;padding: 10rpx; border-radius: $border-radius}
	.hui_left{width:70%}
	.hui_left_one span{color: #a75b05;font-weight: 600;}
	.hui_left_one image{display: block;width: 40rpx;height: 40rpx;}
	.hui_left_two{font-size: $fs2;color: #79441a;}
	.hui_left_three{width:160rpx;height:40rpx;background-color: #79441a;color:#ffd59e;border-radius: 30rpx;font-size: $fs2;text-align: center;line-height: 40rpx;}
	.hui_b{box-sizing: border-box;width: 94%;margin-top: 20rpx;}
	.hui_b view{width:24%;font-size: 24rpx}
	// 成长等级
	.mine_deng{background-color: $bac;border-radius:$border-radius ;padding: 28rpx;margin: 32rpx 0px;box-sizing: border-box;overflow: auto;}
	.deng_top_c text{font-size: $fs2;color: #3c5d88;}
	.mine_deng span{display: block;width:70%;height: 12rpx;background-color: #efefef;border-radius: $border-radius;margin-top: 16rpx;}
	//我的资产
	.deng_top_cha{font-size: 27rpx;}
	.mine_assets{background-color: $bac;border-radius: $border-radius;padding: 40rpx;overflow: auto;}
	.assets_shu{margin: 20rpx 0rem;}
	.assets_shu dl dd, .assets_shu dl dt{height: 40rpx;font-size: 27rpx;}
	.flex1{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;}
	// .assets_list{width:100%}
	.assets_lists{width: 100%;}
	.assets_lists li:nth-child(n+3){margin-top: 15rpx}
	.assets_lists li{width:49%;background-color: #fdf5f2;height: 120rpx;border-radius: $border-radius;padding: 10rpx;box-sizing: border-box;}
	.lists_left_top{font-size: 32rpx;font-weight: 600;color: #873402;}
	.lists_left_top1{font-size: 25rpx;color: #ce9f83;}
	.guang image{height: 130rpx;display: block;margin: 25rpx 0rem;width:100%}
	//常用工具
	.mine_tools{overflow: auto;text-align: center;margin-top: 50rpx;}
	.mine_tools dl dd image{margin: 0 auto;}
	.mine_tools dl{width:20%}
	.mine_tools dl dt{font-size: $fs2}
	.flex3{display: flex;flex-direction: row;justify-content: flex-start;}
</style>
